<template>
	<view class="uni_box home">
		<navbar :isback='false' :backgroundColor='Themecolor'>
			<view slot="left" class="hleft">
				服务中心
			</view>
		</navbar>
		<view class="content">
			<u-sticky :enable="enable" :offset-top="offTop" z-index="100">
				<navClass :currentindex="currentindex" :scrollLeft="scrollLeft" @changeCate="changeCate"></navClass>
				<view class="souviewnew ptong">
					<scroll-view class="souleft" scroll-x>
						<view class="tuiview tactive">
							推荐
						</view>
						<view class="tuiview">
							热门
						</view>
						<view class="tuiview">
							最新
						</view>
					</scroll-view>
					<view class="shaixuan">
						<text>筛选</text>
						<image class="icon_ss" src="/static/icon_ss.png" />
					</view>
				</view>
			</u-sticky>
			<listtwo @toDetail="toDetail"></listtwo>
			
		</view>
</view>
</template>

<script>
import listtwo from '@/components/listtwo/listtwo'
import navClass from '@/components/navClass/navClass'
export default {
	data() {
		return {
			enable: false,
			Captop: 0,
			offTop: 0,
			scrollLeft: 0,//滑动距离
			currentindex: 0,
			Themecolor:this.Themecolor
		}
	},
	components: {
		'listtwo': listtwo,
		'navClass':navClass
	},
	mounted() {
		//在mounted中调用是确保元素已被加载
		//#ifdef MP-WEIXIN
		//通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		this.Cap = uni.getMenuButtonBoundingClientRect();

		this.Captop = this.Cap.top / (uni.upx2px(100) / 100);
		console.log(this.Captop)
		//我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		let CapHeight = (this.Cap.height + this.Cap.top);
		//由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
		//这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		this.offTop = Number(CapHeight / (uni.upx2px(100) / 100))
		//最后拿到想要的值并传入即可
		console.log(this.offTop)
		this.enable = true
		//#endif
		//#ifdef H5
		this.offTop = 0
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
	},
	computed: {
	},
	onLoad() {

	},
	onShow() {
		// this.getList()
		// this.getinfo()
	},
	onReachBottom: function () {
		// this.loadmore();
	},
	methods: {
		changeCate(index) {
			this.scrollLeft = 50 * (index - 1);
			this.currentindex = index
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #FAFAFA;
}

.content {
	padding-bottom: 120rpx;
	background-color: #FAFAFA;

	.souviewnew {
		margin: 0 0 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		// height: 90rpx;
		padding: 0rpx 20rpx 20rpx;
		.souleft{
			width: 70%;
			display: flex;
			white-space: nowrap;
			.tuiview{
				display: inline-block;
				padding: 15rpx 30rpx;
				background: #EEEEEE;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #51565D;
				text-align: center;
				margin-right: 15rpx;
			}
			.tactive{
				background: $Themecolor;
				color: #fff;
			}
		}


		.shaixuan {
			margin-left: auto;
			width: 100rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.icon_ss {
				width: 12rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
		}
	}

	
}

.hleft {
	position: absolute;
	left: 10px;
	font-size: 35rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}

.nodata {
	width: 100%;
	padding-top: 30rpx;
}

.meiyuan {
	font-size: 35rpx;
	position: relative;
	top: -1px;
}

.meiyuantwo {
	font-size: 22rpx;
	position: relative;
	top: -1px;
}</style>
